/**
 * Copyright 2025 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined');

:host
  ::ng-deep
  mat-form-feild
  .mat-form-field-appearance-outline
  .mat-form-field-outline-start {
  color: red;
  border-radius: 50px !important;
  font-size: 10px !important;
}

:host
  ::ng-deep
  .mdc-text-field--outlined
  .mdc-notched-outline
  .mdc-notched-outline__leading {
  border-radius: 28px 0 0 28px !important;
  min-width: 28px !important;
  border-color: #babfc4 !important;
}

:host
  ::ng-deep
  .mdc-text-field--outlined
  .mdc-notched-outline
  .mdc-notched-outline__trailing {
  border-radius: 0 28px 28px 0 !important;
  border-color: #babfc4 !important;
}

:host ::ng-deep .mat-form-field-outline-end {
  border-radius: 0 28px 28px 0 !important;
}

:host ::ng-deep .mat-mdc-card {
  box-shadow:
    0px 2px 1px -1px rgb(217 220 224),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgb(229 232 234) !important;
}

:host ::ng-deep .mat-mdc-standard-chip.mat-primary.mat-mdc-chip-selected,
.mat-mdc-standard-chip.mat-primary.mat-mdc-chip-highlighted {
  --mdc-chip-elevated-container-color: #edf3fe;
  --mdc-chip-elevated-disabled-container-color: #e0e0e0;
  --mdc-chip-label-text-color: #4285f4;
  --mdc-chip-disabled-label-text-color: #4285f4;
  --mdc-chip-with-icon-icon-color: #4285f4;
  --mdc-chip-with-icon-disabled-icon-color: #4285f4;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #4285f4;
  --mdc-chip-with-trailing-icon-trailing-icon-color: #4285f4;
  --mdc-chip-with-icon-selected-icon-color: #4285f4;
}

.parent-container {
  display: flex;
  max-height: calc(100vh - 70px);
  height: 90vh;
  font-family: 'Google Sans', sans-serif !important;
  overflow-y: auto;
  flex-direction: column;
  justify-content: center;

  .img-globe {
    // position:absolute;
    width: 66%;
  }
}

.wrapping-container {
  width: 100%;
}

.main-div {
  font-family: 'Google Sans', sans-serif !important;
}

.text-control {
  width: 32%;
}

h1 {
  line-height: 50px;
  width: 34%;
}

h2 {
  font-family: 'Google Sans', sans-serif !important;
}

.header {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #48b975;
  background-clip: text;
  font-size: 3rem;
  text-align: center;
  font-weight: bold;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  font-family: 'Google Sans', sans-serif;
}

.send-button {
  color: #babfc4;
}

.logo-icon {
  height: 120px;
  width: 400px;
  margin-bottom: 90px;
  margin-left: -20px;
}

.user-info {
  display: flex;
  justify-content: center;
}

.user-info-column {
  display: column;
}

.card-outer-div {
  .card-inside-left {
    .circle {
      width: 100px;
      height: 100px;
      border: 5px solid rgb(255, 255, 255);
      border-radius: 50%;
      overflow: hidden;
      box-shadow:
        0px 2px 1px -1px rgba(0, 0, 0, 0.2),
        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
        0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    }

    .circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .card-inside-right {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #747474;
    font-size: 0.8rem;
    font-weight: 500;

    .name {
      .title {
        font: 1rem;
      }

      .sub-title {
        font-size: 0.9rem;
        margin-left: 2%;
      }
    }

    .company {
      display: flex;
      align-items: center;

      .logo {
        padding-right: 1%;
      }

      .text {
        width: 100%;

        .sub-title {
          margin-left: 2%;
        }
      }
    }
  }
}

.mat-mdc-standard-chip {
  --mdc-chip-label-text-color: #4285f4;
  --mdc-chip-elevated-container-color: #fff;
  border: 1px solid #4285f4 !important;
  font-family: 'Google Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.sub-heading {
  font-family: 'Google Sans', sans-serif;
  color: #161a1d;
  font-size: 30px;
  line-height: 40px;
  margin-top: -20px;
  text-align: left;
  z-index: 999;
}

.genAI {
  //background-image: linear-gradient(to left, #4285F4, #DB4437, #F4B400, #0F9D58);
  // background-image: linear-gradient(to left, #34A853, #FBBC05, #EA4335, #1A73E8);
  background: linear-gradient(
    86.95deg,
    #34a853 -65.34%,
    #fbbc05 -12.75%,
    #ea4335 25.15%,
    #1a73e8 103.88%
  );
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
}

.margin-div {
  margin-top: -20px;
}

.chat-footer-outer {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;

  .chat-footer {
    display: flex;
    border: 1px solid #dde6f6;
    box-shadow: 0px 4px 18px rgba(195, 209, 226, 0.25);
    border-radius: 20px;
    width: 80%;
    backdrop-filter: blur(10px);

    .chat-textarea {
      flex-grow: 1;
      display: flex;
      align-items: center;

      input {
        width: 100%;
        height: 45px;
        border: 0px;
        border-radius: 4px;
        resize: none;
        outline: none;
        padding: 14px;
        font-family: 'Google Sans', sans-serif !important;
        box-sizing: border-box;
        -ms-overflow-style: none;
        scrollbar-width: none;
        font-size: 0.95rem;
        line-height: 1.1rem;
        color: #534646;
        margin-left: 20px;
      }

      input::-webkit-scrollbar {
        display: none;
      }
    }

    .micIcon {
      display: flex;
      align-items: center;
      color: #1f1f1f;
      margin-top: 2px;
      padding-right: 1%;

      img {
        max-width: 40%;
        cursor: pointer;
      }
    }
  }
}

.text-gnosis {
  color: var(--White, #fff);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  letter-spacing: 0.4px;
}

.chip-cancel-button {
  color: #002dff;
}

.categories-div {
  .mat-mdc-standard-chip {
    --mdc-chip-label-text-color: #0f9d58;
    --mdc-chip-elevated-container-color: #fff;
    border: 1px solid #0f9d58 !important;
    font-family: 'Google Sans', sans-serif !important;
    // font-weight: 600;
  }
}

.intent-chip {
  .mat-mdc-standard-chip {
    --mdc-chip-label-text-color: #4285f4;
    --mdc-chip-elevated-container-color: #fff;
    border: 1px solid #4285f4 !important;
    font-family: 'Google Sans', sans-serif !important;
    // font-weight: 600;
  }

  .chip-cancel-button {
    color: #002dff;
  }
}

.category-chip {
  .mat-mdc-standard-chip {
    --mdc-chip-label-text-color: #0f9d58;
    --mdc-chip-elevated-container-color: #fff;
    border: 1px solid #0f9d58 !important;
    font-family: 'Google Sans', sans-serif !important;
    // font-weight: 600;
  }

  .chip-cancel-button {
    color: #007d06;
  }
}

.questions-div {
  flex-direction: column;
  margin-top: 2rem;
  margin-bottom: 5rem;

  .intent-card {
    padding: 0px;
  }

  .intent-heading {
    color: #787978;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: 'Google Sans', sans-serif !important;
    width: 66%;
  }

  .intent-container {
    border-radius: 8px;
    background-color: rgba(246, 249, 254, 1);
    width: 66%;
    box-shadow: none !important;
    flex-shrink: 0;

    .selected-question {
      // margin: 0.5rem 0rem;
      &:hover {
        background-color: rgba(66, 133, 244, 0.1);
      }
    }

    .question-item {
      display: flex;
      justify-content: space-between;
      font-family: 'Google Sans', sans-serif !important;
      color: #787978;
      font-size: 1em;
      line-height: 24px;
    }

    .question-link {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.intent-chip-textarea ::ng-deep .mdc-evolution-chip-set__chips {
  align-items: center !important;
}

.float-button {
  position: fixed;
  right: 3em;
  bottom: 6em;
  --mdc-fab-container-color: #4285f4;
}

.name-container {
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 4rem;
  font-family:
    Google Sans,
    Helvetica Neue,
    sans-serif;
  letter-spacing: -0.03em;
  background: linear-gradient(
    89.9deg,
    rgba(66, 133, 244, 0.95) 0.17%,
    #a488f5 7.34%,
    rgba(234, 67, 53, 0.88) 24.26%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  animation: effect 2s linear;
  display: flex;
  flex-direction: row;
  gap: 1%;
  align-items: center;
  justify-content: center;
}

@keyframes effect {
  0% {
    background: linear-gradient(
      89.9deg,
      rgba(240, 216, 214, 0.88) 0.17%,
      #ebcaec 7.34%,
      rgba(194, 214, 247, 0.95) 24.26%
    );
    -webkit-background-clip: text;
  }

  10% {
    background: linear-gradient(
      89.9deg,
      rgba(227, 237, 253, 0.95) 0.17%,
      #e5ddfd 7.34%,
      rgba(186, 210, 248, 0.95) 24.26%
    );
    -webkit-background-clip: text;
  }

  20% {
    background: linear-gradient(
      89.9deg,
      rgba(218, 231, 253, 0.95) 0.17%,
      #dcd1fc 7.34%,
      rgba(172, 202, 252, 0.95) 24.26%
    );
    -webkit-background-clip: text;
  }

  30% {
    background: linear-gradient(
      89.9deg,
      rgba(199, 219, 252, 0.95) 0.17%,
      #d0c2fa 7.34%,
      rgba(161, 196, 252, 0.95) 24.26%
    );
    -webkit-background-clip: text;
  }

  40% {
    background: linear-gradient(
      89.9deg,
      rgba(169, 201, 253, 0.95) 0.17%,
      #cdbcff 7.34%,
      rgba(149, 188, 250, 0.95) 24.26%
    );
    -webkit-background-clip: text;
  }

  50% {
    background: linear-gradient(
      89.9deg,
      rgba(200, 220, 253, 0.95) 0.17%,
      #bba5fc 7.34%,
      rgba(203, 221, 250, 0.95) 24.26%
    );
    -webkit-background-clip: text;
  }

  60% {
    background: linear-gradient(
      89.9deg,
      rgba(227, 237, 253, 0.95) 0.17%,
      #e5ddfd 7.34%,
      rgba(186, 210, 248, 0.95) 24.26%
    );
    -webkit-background-clip: text;
  }

  70% {
    background: linear-gradient(
      89.9deg,
      rgba(183, 210, 253, 0.95) 0.17%,
      #e5ddfd 7.34%,
      rgba(248, 217, 215, 0.88) 24.26%
    );
    -webkit-background-clip: text;
  }

  80% {
    background: linear-gradient(
      89.9deg,
      rgba(122, 172, 252, 0.95) 0.17%,
      #e5ddfd 7.34%,
      rgba(247, 182, 176, 0.88) 24.26%
    );
    -webkit-background-clip: text;
  }

  90% {
    background: linear-gradient(
      89.9deg,
      rgba(94, 148, 236, 0.95) 0.17%,
      #b49ff1 7.34%,
      rgba(240, 121, 111, 0.88) 24.26%
    );
    -webkit-background-clip: text;
  }

  100% {
    background: linear-gradient(
      89.9deg,
      rgba(66, 133, 244, 0.95) 0.17%,
      #a488f5 7.34%,
      rgba(234, 67, 53, 0.88) 24.26%
    );
    -webkit-background-clip: text;
  }
}

.helper-container {
  white-space: nowrap;
  overflow: hidden;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 4rem;
  font-family:
    Google Sans,
    Helvetica Neue,
    sans-serif;
  letter-spacing: -0.03em;
  color: #8f9391;
  padding-bottom: 3rem;
  opacity: 0.5;
  animation:
    typing 2s steps(22),
    blink 0.5s step-end infinite alternate;
  justify-content: center;
  display: flex;
}

@keyframes typing {
  from {
    width: 0;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.quick-bot-introduction-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;

  .introduction-sub-container {
    width: 66%;
    justify-content: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding-top: 2%;
    padding-bottom: 2%;
    background:
      radial-gradient(white, #fafcff) padding-box,
      linear-gradient(
          89.86deg,
          #34a853 -40.93%,
          #fbbc05 4.92%,
          #ea4335 37.97%,
          #1a73e8 106.62%
        )
        border-box;
    border-radius: 24px;
    border: 1px solid transparent;
  }

  .logo-image-container {
    img {
      height: 110px;
      width: 110px;
    }
  }

  .logo-text-heading {
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 202%;
    /* or 65px */
    text-align: center;

    background: linear-gradient(
      89.86deg,
      #34a853 -40.93%,
      #fbbc05 4.92%,
      #ea4335 37.97%,
      #1a73e8 106.62%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  .logo-text-subheading {
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 202%;
    /* or 48px */
    text-align: center;
  }

  .blue {
    color: #4285f4;
  }
}

.helpButton {
  position: fixed !important;
  bottom: 45px !important;
  right: 20px !important;
  background-color: #4285f4 !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 60px !important;
  height: 41px !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: hidden !important;
  width: auto !important;
  max-width: 41px !important;
  -webkit-transition: max-width 0.5s !important;
  transition: max-width 0.5s !important;
  z-index: 1000 !important;

  &:hover {
    max-width: 300px !important;
  }

  .text {
    white-space: nowrap !important;
    padding-right: 15px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
}

::placeholder {
  color: #646566;
}

.intent-container-box {
  box-sizing: border-box;
  width: 239px;
  height: 239px;
  border-radius: 14px;
  transition-delay: 2s;
  transition: width 8s;
  padding: 1%;
  cursor: pointer;
}

.selected-intent-box {
  box-sizing: border-box;
  height: 239px;
  border-radius: 14px;
  transition-delay: 2s;
  transition: width 8s;
  cursor: pointer;
  width: max-content !important;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1%;
  padding: 1%;
  background:
    linear-gradient(
      92.1deg,
      #bdd1f3 19.16%,
      rgb(199 183 245 / 90%) 79%,
      rgb(235 165 158 / 90%) 135.24%
    ),
    linear-gradient(
      272.04deg,
      rgba(158, 188, 237, 0.7) 14.93%,
      rgba(158, 188, 237, 0) 104.51%
    ) !important;
}

.cards-outer-container {
  width: 65%;
  overflow: auto;
  scrollbar-width: none;
}

.cards-outer-container:after {
  z-index: -1;
  content: '';
  width: 10%;
  opacity: 0.5 !important;
}

.cards-container-all-categories {
  width: max-content;
  display: flex;
  overflow-x: auto;
  gap: 1%;
  max-width: 160%;
  min-width: 100%;
  scrollbar-width: none;
}

.cards-container-few-categories {
  width: max-content;
  display: flex;
  overflow-x: auto;
  gap: 1%;
  max-width: 160%;
  min-width: 100%;
  scrollbar-width: none;
  justify-content: center;
  padding-inline: 5%;
}

.intent-container-box:hover {
  background: #dde3ea !important;
}

.card-detail-container {
  width: 100%;
  min-width: 250px;
  display: flex;
  flex-direction: row;
}

.selected-intent-suggested-question {
  gap: 4%;
  display: flex !important;
  flex-direction: column;
}

.suggested-question-chip-row {
  margin-top: 0.5rem;

  .suggested-question-chip {
    display: flex;
    flex-direction: row;
    margin: 0.5rem;
    padding: 0.5rem;
    width: 100%;

    .suggested-question-icon {
      padding-right: 0.25rem;
    }

    .suggested-question-text {
      margin-left: 0.25rem;

      width: 100%;
    }
  }
}

.close-button-container {
  display: none !important;
}

.expand-close-button-container {
  display: block !important;

  .close-button {
    margin-top: -10px !important;
  }
}

.card-heading {
  padding-top: 2.5%;
  font-size: 17px;
  color: #1f1f1f;
  width: 90%;
}

.card-content {
  font-size: 13px;
  color: #646566;
  padding-top: 4%;
  white-space: break-spaces;
  text-wrap: balance;
  padding-right: 3%;
  text-align: left;
  width: 85%;
}

::ng-deep .mat-mdc-snack-bar-container {
  &.green-snackbar {
    --mdc-snackbar-container-color: #0f9d58;
    --mat-mdc-snack-bar-button-color: #fff;
    --mdc-snackbar-supporting-text-color: #fff;
  }

  &.red-snackbar {
    --mdc-snackbar-container-color: #e9103f;
    --mat-mdc-snack-bar-button-color: #fff;
    --mdc-snackbar-supporting-text-color: #fff;
  }
}

::ng-deep .mat-mdc-dialog-surface {
  justify-content: center !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;
  background: #ffffff;
  border-radius: 20px !important;
  box-sizing: border-box;
  box-shadow: none !important;

  .badge-prompt-parent-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    .badge-greetings-container {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;

      img {
        width: 45%;
      }
    }

    .badge-text-container {
      font-style: normal;
      font-weight: 400;
      font-size: 17px;
      line-height: 45px;
      display: flex;
      align-items: center;
      color: rgba(92, 95, 97, 0.7);
    }
  }
}

.blue-dot {
  /* Ellipse 1226 */
  content: '';
  width: 8px;
  height: 8px;
  left: 1503px;
  top: 445px;
  display: flow-root;
  border-radius: 15px;

  /* Blue */
  background: #4285f4;
  animation: blue-transform 2s infinite;
}

.green-dot {
  content: '';
  width: 8px;
  height: 8px;
  left: 1522px;
  top: 445px;
  display: flow-root;
  border-radius: 15px;

  /* Green */
  background: #0f9d58;
  animation: green-transform 2s infinite;
}

.yellow-dot {
  content: '';
  width: 8px;
  height: 8px;
  left: 1541px;
  top: 445px;
  display: flow-root;
  border-radius: 15px;

  /* Yellow */
  background: #f4b400;
  animation: yellow-transform 2s infinite;
}

.recording-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  cursor: pointer;
  align-items: baseline;
}

@keyframes blue-transform {
  0% {
    transform: translateY(-14px);
  }

  33% {
    transform: translateY(0);
  }

  66% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-14px);
  }
}

@keyframes green-transform {
  0% {
    transform: translateY(0);
  }

  33% {
    transform: translateY(-14px);
  }

  66% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes yellow-transform {
  0% {
    transform: translateY(0);
  }

  33% {
    transform: translateY(0);
  }

  66% {
    transform: translateY(-14px);
  }

  100% {
    transform: translateY(0);
  }
}

.tooltip-container {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: baseline;
  padding-top: 2%;
  padding-bottom: 2%;
  .tooltip-sub-container {
    width: 66%;
    display: flex;
    align-items: baseline;
    justify-content: center;
  }
}

.tooltip-icon-container {
  display: flex;
  flex-direction: row;
  // align-self: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  text-wrap: nowrap;
  align-self: center;
  color: #5f6368;

  .tooltip-label {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
  }

  mat-icon {
    font-size: 22px !important;
  }
}

.tooltip-text-container {
  flex-wrap: wrap;
  word-wrap: break-word;
  justify-content: flex-start;
  display: flex;
  color: #5f6368;
  .tooltip-text {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
  }
}

.dismiss-container {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  /* identical to box height, or 143% */
  text-align: center;

  /* Blue */
  color: #4285f4;
  padding-left: 1%;
  cursor: pointer;
}

.dismiss-container:hover {
  text-decoration: underline;
}

.journey-chips {
  max-height: 300px;
  overflow-y: auto;
}

::ng-deep .mat-mdc-standard-chip:hover {
  background: linear-gradient(
    92.1deg,
    #9ebced 19.16%,
    rgba(164, 136, 245, 0.9) 79%
  ) !important;
  --mdc-chip-label-text-color: #fff;
}

.suggested-question-container {
  width: 60%;
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
  .helper-container {
    font-size: 2rem;
  }
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
  .chat-footer-outer {
    .chat-footer {
      min-height: 60px;
      width: 66%;
    }
  }

  .helper-container {
    font-size: 3.5rem;
  }
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
}

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
}

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) {
}
